<template>
  <div class="box w">
    <HeaderComponent />
    <el-container>
      <el-main class="main">
        <div class="leftComponent" style="float:left">
          <ContentOneComponent />
          <div class="ComponentTow" style="float: left;" >
            <div class="newsComponents">
              <div>
                <newsItems v-for="(i, index) in Blogs" :key="i.id"
                           :data=i
                           ref="newsItemsRefs"
                           :floatStyle="index % 2 === 0 ? 'right' : 'left'" style="margin: 10px"></newsItems>
              </div>
              <div class="pagination-container">
                <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
        <div class="ComponentThree" style="float: right;">
          <div calss="search" style="margin:20px">
            <el-input
                v-model="state2"
                placeholder="请输入内容"
            ></el-input>
            <el-button style="margin-left: 10px;" size="small" type="success" plain @click="push()">搜索</el-button>
          </div>
          <div class="weather" style="border:1px solid #ccc;height: 623px; margin:10px">
            <get-views></get-views>
          </div>
          <div class="tags" style=" height: 385px; margin: 10px;">
<!--            <DocumentList></DocumentList>-->
            <h1>友情链接</h1>
            <main class="sidebar-lists">
              <ul>
                <li v-for="link in links" :key="link.id" class="sidebar-list-item">
                  <a class="tag tooltipped tooltipped-n" :href="'http://'+link.link">
                    {{ link.linkName }}
                  </a>
                </li>
              </ul>
            </main>
          </div>
        </div>
      </el-main>
      <el-footer height="260px">
        <FooterConponent />

      </el-footer>
    </el-container>

    <!-- <div class="line"></div> -->
  </div>
</template>
<script>

import HeaderComponent from "../components/Header.vue"
import ContentOneComponent from "../components/ContentOne.vue"
import FooterConponent from "../components/Footer.vue"
import newsItems from "@/components/BlogItems.vue"
import getViews from "@/components/getViews";
// import WeatherReport from '@/components/WeatherReport.vue'
// import DocumentList from "@/components/DocumentList.vue"

export default {
  name: "ShouYeComponent",
  components: {
    // NavComponent,
    HeaderComponent,
    ContentOneComponent,
    // ContentTwoConponent,
    FooterConponent,
    newsItems,
    getViews
    // WeatherReport,
    // DocumentList
  },
  data() {
    return {
      links:[],
      handleItem:[],
      state2:'',
      news:[],
      counts: 6,
      input: '',
      Blogs: [],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 5,//每页显示的记录数
        total: 0,//总记录数
      },
    }
  },

  methods: {
    //切换页码
    handleCurrentChange(currentPage) {
      //修改页码值为当前选中的页码值
      this.pagination.currentPage = currentPage;
      //执行查询
      this.getBlogs();
    },
    getLinks(){
      this.$axios.get("/Link/pagin?pageNum=1&pageSize=5&LinkName=").then((res) => {
        // this.pagination.total = res.data.data.count;
        this.links = res.data.data.list;
        console.log("links")
        console.log(this.links)
      });
    },
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath)
    // },
    // handleChange() {
    // 输入框的值发生变化时会触发该函数
    //请求搜索
    // this.$axios.get("/ ?"+this.state2).then((res) => {
    //   this.news = res.data.data.records;
    // })
    // this.news=[{ "value": "变化了", "content": "长宁区新渔路144号" ,"title":"测试","authir":"德华"}]
    // console.log(this.state2)
    // 在这里可以对输入框中的值进行处理
    //如何动态的修改推荐数据集
    // },
    querySearch(queryString, cb) {
      // console.log("this.news")
      //
      // console.log(this.news)
      var news = this.news;
      var results = queryString ? news.filter(this.createFilter(queryString)) : news;
      // 调用 callback 返回建议列表的数据
      console.log("results")

      console.log(results)
      cb(results);
    },
    createFilter(queryString) {
      return (news) => {
        return (news.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    //获取所有博客
    getBlogs(){
      let param = "";
      this.$axios.get("/tbBlog/pagin?pageNum=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize + param).then((res) => {
        this.pagination.total = res.data.data.count;
        this.Blogs = res.data.data.list;
      });
    },
    handleSelect(item) {
      var a = item;
      this.handleItem=a;
      // console.log("]]]]]]]]]]]]]]]]");
      //
      // console.log(this.handleItem);
      //带参数路由到文章详情页面
      // this.$router.push("/newsDetail");
      // this.$router.push({ path: '/newsDetail', query: { nId:this.handleItem.nId,nClass:this.handleItem.nClass,content:this.handleItem.content,title:this.handleItem.title,author:this.handleItem.author}})

    },
    push(){
      // this.$router.push('/searchPage?title='+)
      this.$router.push({ path: '/searchPage', query: {keywords:this.state2}})
    }
  },
  mounted() {
    this.getBlogs();
    this.getLinks();
    //通过ref属性访问每个组件的实例，访问每个组件的方法
    this.$refs.newsItemsRefs.forEach(component => {
      // component.getAll();
      component.getPic();
    });
  }
}
</script>
<style>


#foot {
  text-align: center;
  align-items: center;
}

.main {
  display: block;
  width: 1100px;
  /* flex: 1; */
  /* flex-basis: auto; */
  overflow: auto;
  box-sizing: border-box;
}



.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box {
  width: 1100px;
  /* height: 1000px; */
  /* padding: 0 8px; */
  background-color: white;
  margin: 0 auto;
  border: 1px solid rgba(8,0,255,0.07);
}

.ComponentThree {
  border: 1px solid #ccc;
  width: 322px;
  height: 1120px;
  /* margin-top: 50px; */
}

/*span:hover {*/
/*  color: red;*/
/*}*/
</style>
